<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div style="position: relative">
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name">分类</span>
          <span
            v-for="(item, index) in classify"
            :key="index"
            class="select-item"
            :class="[index == classifySelect ? 'active' : 'normal']"
            style="margin-right: 40px"
            @click="changeClassify(index)"
          >
            {{ item }}
          </span>
          <template v-if="classifySelect == 0">
            <span class="item-name">待抢注时间</span>
            <Select v-model="rushTime" value="全部时间" style="width: 150px">
              <Option
                v-for="item in rushTimeList"
                :value="item.name"
                :key="item.value"
                >{{ item.name }}</Option
              >
            </Select>
          </template>
          <template v-else-if="classifySelect == 1">
            <span class="item-name">删除时间</span>
            <Select @on-change="changeDateType" v-model="dateType" style="width: 150px; margin-right: 10px">
              <Option
                  v-for="item in dateTypeList"
                  :value="item.type"
                  :key="item.type"
              >{{ item.name }}</Option
              >
            </Select>
            <DatePicker
              :editable="false"
              type="daterange"
              split-panels
              placeholder="请选择"
              style="width: 210px"
              @on-change="dateChange"
              :options="dateOption"
              :value="time"
            ></DatePicker>
          </template>
          <span class="item-name">通道</span>
          <Select v-model="registerDate" style="width: 150px">
            <Option
                v-for="item in registerDateList"
                :value="item.value"
                :key="item.value"
            >{{ item.label }}</Option
            >
          </Select>
        </div>
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name" style="text-align: right">域名</span>
          <div class="wrapdmTextarea">
            <div class="textarea-warp" style="z-index: 200; top: 0;">
              <Input class="ui-input dmTextarea" :class="dmName ? 'dmTyping' : ''" @on-focus="dmName = true"
                     @on-blur="dmName = false"  v-model.trim="domainName" type="textarea" placeholder="批量请换行分隔">
                <template #suffix>
                  <Icon type="ios-search"/>
                </template>
              </Input>
            </div>
          </div>
          <span class="item-name">域名后缀</span>
          <Select v-model="domainSuffixs" style="width: 150px">
            <Option
              v-for="item in domainSuffixList"
              :value="item.suffix"
              :key="item.suffix"
              >{{ item.suffix }}</Option
            >
          </Select>
          <span class="item-name">预订类型</span>
          <Select v-model="biddingType" multiple  style="width: 150px">
            <Option
              v-for="(item) in biddingTypeList"
              :value="item.value"
              :key="item.value"
              >{{ item.name }}</Option
            >
          </Select>

          <div
              class="user-strong-button line-button-size"
              style="margin: 0px 10px 0px 30px;"
              @click="pageChange(1)"
          >
            搜索
          </div>
          <div class="user-normal-button line-button-size" @click="reset">
            重置
          </div>
        </div>
      </div>
    </div>

    <div class="user-main-box pub-m-t-20">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="c-g f-14"
            >搜索结果共<span class="c-black">{{
              total != null ? ` ${total} ` : ""
            }}</span
            >条</span
          >
        </div>
        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">域名</div></th>
              <th><div class="line-style">抢注通道</div></th>
              <th><div class="line-style">价格（元）</div></th>
              <th><div class="line-style">保证金（元）</div></th>
              <th><div class="line-style">预订时间</div></th>
              <th v-if="classifySelect == 1">
                <div class="line-style">删除时间</div>
              </th>
              <template v-if="classifySelect == 0">
                <th><div class="line-style">待抢注时间</div></th>
                <th><div class="line-style">操作</div></th>
              </template>
              <th v-else><div class="line-style">得标状态</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{ (page - 1) * pageSize + index + 1 }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-r f-ell-sin" :title="item.domainName">{{
                    item.domainName
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{ item.channelName }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-r">{{ item.price }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-r">{{ item.bond }}</span>
                </div>
              </td>
              <td>
                <div class="line-style normal-f">{{ item.createdTime }}</div>
              </td>
              <td>
                <div class="line-style normal-f">
                  {{ item.serverDeleteTime }}
                </div>
              </td>
              <td v-if="classifySelect == 1">
                <div class="line-style normal-f">
                  {{
                    item.status == 0
                      ? "抢注中"
                      : item.status == 1
                      ? "竞价中"
                      : item.status == 2
                      ? "竞价得标"
                      : item.status == 3
                      ? "抢注未得标"
                      : item.status == 4
                      ? "竞价未得标"
                      : item.status == 5
                      ? "用户取消"
                      : item.status == 6
                      ? "预订失败"
                      : "-"
                  }}
                </div>
              </td>
              <td v-else>
                <div class="line-style normal-f">
                  --
                  <!-- <div class="form-font-button" @click="cancelItem(item.id)">
                    取消预订
                  </div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { domainSuffix } from "@/utils/publicData";
import { bookingChannel, createDateTypeList } from "@/utils/publicData";
import { getMyBooking, bookingCancel } from "@/api/user";
export default {
  name: "VipMybookings",
  data() {
    return {
      loading: false,
      dmName: false,
      breadCrumb: [{name: "管理中心"},{ name: "域名预订" }, { name: "我的预订" }],
      tablist: [
        {
          name: "我的预订",
          to: "/user/mybookings",
        },
      ],
      classify: ["待抢注的预订", "历史预订记录"],
      classifySelect: 0,
      rushTimeList: [],
      rushTime:"全部日期",
      // 预订类型
      biddingTypeList:[],
      biddingType:[],
      // 域名后缀
      domainSuffixs: -1,
      // 域名后缀数据
      domainSuffixList: [],
      domainCategory: "",
      domainStructure: "",
      registerDateList: [
        {
          value: "default",
          label: "不限",
        },
      ],

      // 表单数据
      time: [],
      delBeginDate: "",
      delEndDate: "",
      domainName: "",
      registerDate: "default",

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
      dateType: 0,
      dateTypeList: [],
      dateOption: {
      },
    };
  },
  created() {
    this.getRushTimeList();
    this.getDomainSuffix();
    this.getChannel();
    this.getMyBooking();
    this.createDateTypeList()
  },
  async mounted() {
    const data = await this.$storage.getDomainQueryTerm();
    this.rushTimeList = data.deleteList;
    this.biddingTypeList = data.platforms;
  },
  methods: {
    changeDateType() {
      this.changeDateOption()
    },
    changeDateOption() {
      this.time = []
      this.delBeginDate = null;
      this.delEndDate = null;
      this.dateOption = {
        disabledDate: date => {
          let item = this.dateTypeList.filter(item => item.type === this.dateType);
          return date && (date.valueOf() < item[0].startTime || date.valueOf() > item[0].endTime);
        }
      };
    },
    createDateTypeList() {
      this.dateTypeList = createDateTypeList(6)
      this.changeDateOption()
    },
    // 获取域名后缀
    async getDomainSuffix() {
      let res = await domainSuffix();
      this.domainSuffixList = res;
    },
    // 切换分类
    changeClassify(index) {
      if (index == this.classifySelect) return;
      this.classifySelect = index;
      this.reset();
    },
    // 待抢注时间改变
    rushTimeChange(index) {
      this.rushTime = index;
      this.pageChange(1);
    },
    // 获取列表
    async getMyBooking() {
      this.loading = true;
      let domainName = this.domainName.replace(/\n/g, ",");
      let data = {
        type: this.classifySelect,
        domainName: domainName,
        limit: this.pageSize,
        page: this.page,
        platforms: this.biddingType,
        dateType: this.dateType
      };
      if (this.registerDate != "default") {
        data.channelId = this.registerDate;
      }
      if (this.classifySelect == 0) {
        if (this.rushTime != '全部日期') {
              data.delBeginDate = this.rushTime;
              data.delEndDate = this.rushTime;
        }else{
              data.delBeginDate = '';
              data.delEndDate = '';
        }
      } else {
        if (this.delEndDate != null && this.delEndDate != "") {
          data.delEndDate = this.delEndDate;
          data.delBeginDate = this.delBeginDate;
        }
      }

      this.domainSuffixs != -1 && (data.domainSuffix = this.domainSuffixs);
      let res = await getMyBooking(data);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 重置
    reset() {
      this.rushTime = "全部日期";
      this.biddingType = [];
      this.time = [];
      this.domainName = "";
      this.delBeginDate = '';
      this.delEndDate = '';
      this.registerDate = "default";
      this.page = 1;
      this.domainSuffixs = '';
      this.dateType = 0
      this.getMyBooking();
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getMyBooking();
    },
    // 获取待抢注时间
    getRushTimeList() {
      let day1 = new Date();
      day1.setTime(day1.getTime() + 24 * 60 * 60 * 1000);
      let value1 =
        day1.getFullYear() +
        "-" +
        (day1.getMonth() + 1 > 9
          ? day1.getMonth() + 1
          : "0" + (day1.getMonth() + 1)) +
        "-" +
        (day1.getDate() > 9 ? day1.getDate() : "0" + day1.getDate());
      let day2 = new Date();
      day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000 * 2);
      let value2 =
        day2.getFullYear() +
        "-" +
        (day1.getMonth() + 1 > 9
          ? day1.getMonth() + 1
          : "0" + (day1.getMonth() + 1)) +
        "-" +
        (day2.getDate() > 9 ? day2.getDate() : "0" + day2.getDate());
      let day3 = new Date();
      day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000 * 3);
      let value3 =
        day3.getFullYear() +
        "-" +
        (day1.getMonth() + 1 > 9
          ? day1.getMonth() + 1
          : "0" + (day1.getMonth() + 1)) +
        "-" +
        (day3.getDate() > 9 ? day3.getDate() : "0" + day3.getDate());
      this.rushTimeList = [
        {
          name: "全部",
          value: "",
        },
        {
          name: `${day1.getMonth() + 1}月${day1.getDate()}日`,
          value: value1,
        },
        {
          name: `${day2.getMonth() + 1}月${day2.getDate()}日`,
          value: value2,
        },
        {
          name: `${day3.getMonth() + 1}月${day3.getDate()}日`,
          value: value3,
        },
      ];
    },
    // 日期选择改变
    dateChange(date) {
      this.delBeginDate = date[0];
      this.delEndDate = date[1];
    },
    // 获取通道
    async getChannel() {
      let res = await bookingChannel();
      let list = res.map((item) => {
        return {
          value: item.id,
          label: item.channelName,
        };
      });
      this.registerDateList = this.registerDateList.concat(list);
    },
    // 删除模板
    cancelItem(id) {
      this.$Modal.confirm({
        title: "取消确认",
        content: "<p>确定要取消预订此域名吗？</p>",
        onOk: async () => {
          let res = await bookingCancel({ userBiddingId: id });
          if (res.code == 200) {
            this.$Message.success("取消成功！");
            this.getMyBooking();
          }
        },
      });
    },
    bookingCancel() {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .ivu-select-multiple .ivu-select-selection{
  height: auto !important;
}
.mg-r-25 {
  margin-right: 25px;
}
</style>
